<template>
    <div style="background-color: #fff">
        <section class="search-page is-full-container">
            <header class="search-page__header">
                <div class="stage-tabs--page-filter">
                            <el-tabs v-model="activeName">
                                <el-tab-pane label="作者" name="author">
                                    <SearchAuthor />
                                </el-tab-pane>
                                <el-tab-pane label="作品" name="work">
                                    <SearchWork></SearchWork>
                                </el-tab-pane>
                                <el-tab-pane label="需求" name="demand">
                                    <SearchDemand></SearchDemand>
                                </el-tab-pane>
                            </el-tabs>
                </div>
            </header>

        </section>
    </div>
</template>

<script setup>
    import SearchWork from "@/views/search/SearchWork.vue";
    import SearchAuthor from "@/views/search/SearchAuthor.vue";
    import SearchDemand from "@/views/search/SearchDemand.vue";
    import {useRoute} from "vue-router";
    import {ref} from "vue";

    const route = useRoute();
    const activeName = ref('author');
    const searchText = ref(route.query.searchText);


</script>

<style scoped>
    .search-page {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .search-page__header {
        width: 100%;
    }

    .search-page__header {
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    .global-search-input.el-input input {
        padding: 23px 27px;
        height: auto;
        line-height: normal;
    }

    .global-search-input .el-input__suffix .el-input__suffix-inner a {
        color: #9b9b9b;
        transition: .5s;
        cursor: pointer;
    }

    a {
        text-decoration: none;
    }

    .stage-tabs--page-filter {
        width: 100%;
    }

    /deep/ .el-tabs__header {
        padding: 0;
        position: relative;
        margin: 0 0;
    }

    /deep/ .el-tabs__nav-wrap {
        display: flex;
        overflow: hidden;
        margin-bottom: -1px;
        position: relative;
        justify-content: center;
    }

    /deep/ .el-tabs__item {
        padding: 0 48px;
        height: 50px;
        line-height: 50px;
        box-sizing: border-box;
        display: inline-block;
        list-style: none;
        font-size: 14px;
        font-weight: 500;
        color: #27282e;
        position: relative;
    }

    /deep/ .el-tabs__content {
        overflow: hidden;
        position: relative;
    }

</style>
